<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import jdfkService from '@/api/jdfk'
/*
 * 打开弹窗
 */
const emit = defineEmits(['refresh'])
const dialogVisible = ref(false)
const currentRow = ref()
const openDialog = (row: any) => {
  dialogVisible.value = true
  currentRow.value = row
}

/*
 * 确定按钮
 */
// 保存借阅审核结果入参
const form = ref({
  jsyy: '', // 退回原因
})

const rules = reactive<FormRules<any>>({
  jsyy: [{ required: true, message: '必填', trigger: 'change' }],
})

const ruleFormRef = ref()
const loading = ref(false)
const confirm = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = {
        ...form.value,
        jdbh: currentRow.value.jdbh,
      }
      loading.value = true
      jdfkService
        .updateJsjd(params)
        .then(() => {
          dialogVisible.value = false
          ElMessage({ type: 'success', message: '操作成功' })
          emit('refresh')
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}
const closeDialog = () => {
  currentRow.value = undefined
  form.value = {
    jsyy: '',
  }
}
defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="结束监督"
    width="600px"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="结束原因" prop="jsyy">
        <el-input v-model="form.jsyy" type="textarea" maxlength="200" :rows="4" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm" :loading="loading">确定</el-button>
        <el-button type="default" @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
